<template>
    <div class="my">
        <!-- 头部信息 -->
        <nav-bar>
            <div slot="left" @click="goback">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div slot="center">充值</div>
        </nav-bar>

        <div style="margin-top: 10px">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="form.amount"
                    placeholder="请输入充值金额"
                    autosize
                    maxlength="100"
                    type="number"
                />

                <!--支付 star-->
                <div class="pay">
                    <div class="show">
                        <li>
                            <label>
                                <img
                                    src="~/assets/img/cart/zhifubao.png"
                                />支付宝支付
                                <input
                                    type="radio"
                                    v-model="form.payPlatform"
                                    value="2"
                                    name="Fruit"
                                />
                                <span></span>
                            </label>
                        </li>
                        <li>
                            <label>
                                <img
                                    src="~/assets/img/cart/weixin.png"
                                />微信支付
                                <input
                                    type="radio"
                                    v-model="form.payPlatform"
                                    value="1"
                                    name="Fruit"
                                />
                                <!-- <input name="Fruit" type="radio" value="0"  /> -->
                                <span></span>
                            </label>
                        </li>
                    </div>
                </div>

                <div style="margin: 16px">
                    <van-button round block type="info" native-type="submit"
                        >确认充值</van-button
                    >
                </div>
            </van-form>
        </div>
    </div>
</template>

  <script>
// import { Uploader } from 'vant';
import base from "../../api/base.js";
import NavBar from "../../components/common/navbar/NavBar.vue";

export default {
    components: {
        NavBar,
    },
    data() {
        return {
            orderNo: "",
            openId: "",
            form: {
                amount: 0,
                payPlatform: 2,
            },
        };
    },
    mounted() {
        this.openId = this.$route.query.openid
        alert(this.openId)
        if(this.isWeiXin() && this.openId==undefined) {
            alert("heheheh")
            // 获取code和openid，使用测试公众号，必须设置授权网页的域名
            window.location.href = "http://6w4cdp.natappfree.cc/app/order/wx/authorize"
        }
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        onBridgeReady(params) {
            let _this = this;
            WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                    appId: params.appId, // 公众号名称，由商户传入
                    timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
                    nonceStr: params.nonceStr, // 随机串
                    package: params.package,
                    signType: params.signType, // 微信签名方式：
                    paySign: params.paySign, // 微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 支付成功跳转页面
                        _this.$router.push("/paySuccess");
                    } else {
                        // 支付失败跳转页面
                        _this.$router.push("/payFailure");
                    }
                    // location.href = params.Url
                }
            );
        },
        isWeiXin () {
            var ua = window.navigator.userAgent.toLowerCase();
            // ua.indexOf('micromessenger')为真-微信端，如果为假，就是其他浏览器
            if (ua.indexOf('micromessenger') > -1) {
                return true; // 是微信端
            } else {
                return false;
            }
        },
        onSubmit() {
            console.log(this.form);
            // 生成充值订单
            this.$api.recharge
                .recharge({
                    amount: this.form.amount,
                    payPlatform: this.form.payPlatform,
                    token:this.token
                })
                .then((res) => {
                    // 获取充值订单的编号
                    this.orderNo = res.data.data
                    console.log("143",res);

                    var h5Type = 2; // 微信的h5支付
                    // 是否微信浏览器
                    if(this.isWeiXin()) {
                        h5Type = 1; // 微信浏览器中，使用jsapi支付
                    }

                    // 调用支付接口
                    // 这里填写后台支付的地址
                    this.$api.pay
                        .prePay({
                            orderNo: this.orderNo,
                            payPlatform: this.form.payPlatform,
                            amount: this.form.amount,
                            openId: this.openId,
                            payH5Type: h5Type
                        })
                        .then((res) => {
                            console.log(res);
                            // 支付宝
                            if (this.form.payPlatform == 2) {
                                console.log("123131313");
                                const div = document.createElement("div");
                                div.innerHTML = res.data.data; //res.data是返回的表单字符串
                                document.body.appendChild(div);
                                // document.forms.alipaysubmit.submit();
                                document.forms[1].submit();
                            } else {
                                // 微信
                                // 判断是否是微信浏览器
                                // 如果是，调用后端的jsapi支付接口，返回支付信息，然后调用内置的WeixinJSBridge
                                // 如果不是，调用后端的微信的h5支付接口，返回微信支付页面的路径，前端跳转到该路径进行支付
                                if(this.isWeiXin()) {
                                    this.onBridgeReady(res.data.data)
                                } else {
                                // https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx09100729136074a0644c1f0f1029840001&package=910394590
                                    window.location.href = res.data.data
                                }

                            }
                        });
                    }
                );
        },

    },
};
</script>

  <style>
.van-field__control {
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 30px;
}

.pay {
    width: 100%;
    height: 300px;
    position: relative;
}
.show {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.show li {
    width: 100%;
    height: 60px;
    line-height: 60px;
    list-style: none;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.show img {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    margin-right: 10px;
}
.show input[type="radio"] {
    display: none;
}
.show input[type="radio"] + span {
    border: 1px solid #cccccc;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
}
.show input[type="radio"]:checked + span {
    border: 1px solid #66c068;
    border-radius: 20px;
    background: url("../../assets/img/cart/checkbox.png") no-repeat;
    background-size: 20px 20px;
}
</style>

